<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .flex-box{
            display: flex;
        }
        .flex1{
            flex: 1;
        }
        .center{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box{
            height: 100px;
        }
        .route{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="box flex-box">
    <span class="flex1 center route">home</span>
    <span class="flex1 center route">shop</span>
    <span class="flex1 center route">shopcar</span>
    <span class="flex1 center route">usercenter</span>
</div>
<div id="root"></div>
</body>
<script>
    const routes = [{
        path:'0',
        template:'<div>00000000</div>'
    },{
        path:'1',
        template:'<div>11111111</div>'
    },{
        path:'2',
        template:'<div>22222222</div>'
    },{
        path:'3',
        template:'<div>33333333</div>'
    }]
    var mount = document.getElementById('root')
    var list = document.getElementsByClassName('route');
    for (var i = 0; i < list.length; i ++) {
        list[i].onclick = (function (i) {
            return function () {
                // console.log(window.location, i)
                window.location.hash = `${i}`
            }
        })(i)
    }
    addEventListener("hashchange", (e) => {
        console.log(e.newURL.split("#")[1]);
        var path = e.newURL.split("#")[1];
        var item = routes.find((item)=> {
            return item.path === path;
        })
        mount.innerHTML = item.template
    })
</script>
</html>